<template>
  <svg class="icon" :class="iconClass">
    <use :xlink:href="Icons[name]"></use>
  </svg>
</template>

<script>
  import Icons from 'icons'
  export default {
    props: {
      name: {
        type: String,
        required: true,
        default: '',
        validator (val) {
          return Icons[val]
        }
      }
    },
    computed: {
      iconClass: function () {
        return 'icon-' + this.name
      }
    },
    data () {
      return {
        Icons: Icons
      }
    }
  }
</script>
